<template>
  <jy-dialog :title="title" :visible.sync="open" width="60%" append-to-body>
    <div>
      <el-table border stripe v-loading="loading" :data="dataBaseList" height="360">
        <el-table-column width="50" label="选择" class-name="radio-border">
          <template slot-scope="scope">
            <el-radio :label="scope.row.deId" v-model="currentDetailId">{{ '' }}</el-radio>
          </template>
        </el-table-column>
        <el-table-column label="序号" align="center" type="index" width="80" />
        <el-table-column label="试验温度（℃）" align="center" prop="temp" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column label="水的密度（g/cm³）" align="center" prop="density" min-width="140" :show-overflow-tooltip="true" />
        <el-table-column label="水温修正系数" align="center" prop="coefficient" min-width="140" :show-overflow-tooltip="true" />
      </el-table>
      <pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
    </div>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" type="primary" @click="submitForm">确 定</el-button>
      <el-button size="small" type="primary" @click="reset">清 空</el-button>
      <el-button size="small" @click="cancel">取 消</el-button>
    </div>
  </jy-dialog>
</template>

<script>
import {
  listBySyTypeId,
} from "@/api/sycs/dataBase";

export default {
  name: "DataBase",
  data() {
    return {
      // 按钮loading
      buttonLoading: false,
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 试验数据设置主表表格数据
      dataBaseList: [],
      // 是否显示弹出层
      open: false,
      // 弹窗标题
      title: '水的密度设置',
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        syYjId: '281757153833',
      },
      currentDetailId: undefined,
    };
  },
  created() {
  },
  methods: {
    init() {
      this.open = true;
      this.getList();
    },
    /** 查询试验数据设置主表列表 */
    getList() {
      this.loading = true;
      listBySyTypeId(this.queryParams).then((response) => {
        this.dataBaseList = response.data.page.records;
        this.total = response.data.page.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.currentDetailId = undefined;
    },
    reset() {
      this.currentDetailId = undefined;
      this.$emit("select", { syTypeId: undefined, deId: undefined, temp: undefined, density: undefined, coefficient:undefined });
      this.cancel();
    },
    submitForm() {
      if (!this.currentDetailId) {
        this.$message.warning("请选择水密度");
        return;
      }
      const index = this.dataBaseList.findIndex(item => item.deId == this.currentDetailId);
      const rdata = this.dataBaseList[index];
      this.$emit("select", { syTypeId: rdata.syTypeId, deId: rdata.deId, temp: rdata.temp, density: rdata.density, coefficient: rdata.coefficient });
      this.cancel();
    }
  }
};
</script>
<style lang="scss" scoped>
  @import "~@/assets/styles/demo.scss";
  ::v-deep .radio-border .cell {
    display: flex;
    justify-content: center;
    padding-right: 0;
  }
</style>
